﻿<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>html5微信手机端招聘信息专题动画切换代码</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
  <!--
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
-->
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <script src="js/swiper.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>

  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <script src="/demos/googlegg.js"></script>
  <div class="swiper-container" id="swiper-container-v">

    <section class="poster_wrap load" id="load">
      <div class="p_loading">
        <div class="p_loading_logo"></div>
        <p class="p_loading_tip">新生活，从新工作开始</p>
      </div>
    </section>


    <div class="swiper-wrapper">
      <!-------------slide1----------------->
      <section class="swiper-slide swiper-slide1 swiper-slide-v">
        <div class="index-top ani" swiper-animate-effect="myZoomIn1" swiper-animate-duration="0.6s"
          swiper-animate-delay="0s">
          <div class="logo">
            <div class="box1">
              <div class="box2">
                <img src="upload/wzp_logo.png">
              </div>
            </div>
          </div>
          <h1 class="poster_tit">某同城公司</h1>
          <p class="poster_details">新生活，从新工作开始</p>

        </div>

        <div class="building ani" swiper-animate-effect="myZoomIn2" swiper-animate-duration="0.6s"
          swiper-animate-delay="0s"></div>

      </section>
      <!---------------slide2-------------->
      <section class="swiper-slide swiper-slide2 swiper-slide-v">


        <ul class="company_intro">
          <li class="intro1 ani" swiper-animate-effect="myFlip" swiper-animate-duration="0.3s"
            swiper-animate-delay="0s">
            <div class="icon"><i></i></div>
            <p>深圳</p>
          </li>
          <li class="intro2 ani" swiper-animate-effect="myFlip" swiper-animate-duration="0.3s"
            swiper-animate-delay="0.1s">
            <div class="icon"><i></i></div>
            <p>50-500人</p>
          </li>
          <li class="intro3 ani" swiper-animate-effect="myFlip" swiper-animate-duration="0.3s"
            swiper-animate-delay="0.2s">
            <div class="icon"><i></i></div>
            <p>私营</p>
          </li>
        </ul>


        <h3 class="about_us_tit ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
          swiper-animate-delay="0.3s"><i class="about_us_tit_ico"></i>认识我们</h3>
        <div class="about_us_msg_p ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s"
          swiper-animate-delay="0.5s">
          美国纽交所上市公司，国内专业的“本地、免费、真实、高效”生活服务平台！找租房，找二手房，找工作，找兼职，买卖二手，二手车交易，买卖宠物，找搬家，找保姆，找保洁，租车拼车，工商注册，婚车婚宴，上某同城一站解决！信息真实可靠，先行赔付！
        </div>

      </section>
      <!----------------slide3-------------->
      <section class="swiper-slide swiper-slide3 swiper-slide-v">

        <h1 class="abus_head"><i class="about_us_tit_ico"></i>我们的福利</h1>



        <div class="welf_bg">
          <div class="one ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn"
            swiper-animate-duration="0.5s" swiper-animate-delay="0s"><span>五险一金</span></div>
          <div class="two ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn"
            swiper-animate-duration="0.5s" swiper-animate-delay="0.1s"><span>每周双休</span></div>
          <div class="thr ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn"
            swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"><span>福利待遇好</span></div>
          <div class="thi ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn"
            swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"><span>发展前景好</span></div>
          <div class="fiv ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn"
            swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><span>晋升空间大</span></div>
          <div class="six ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn"
            swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><span>提供培训</span></div>
        </div>








      </section>
      <!-------------slide4----------------->
      <section class="swiper-slide swiper-slide4 swiper-slide-v">
        <h1 class="posit_tit"><i class="about_us_tit_ico"></i>我们招聘的职位</h1>
        <div class="swiper-container ani" id="swiper-container-h" swiper-animate-effect="rotateInUpLeft"
          swiper-animate-duration="0.5s" swiper-animate-delay="0s">
          <div class="swiper-wrapper">
            <div class="swiper-slide slide1">
              <div class="posit_details_head">
                <h3 class="posit_details_tit">公关专员</h3>
                <span class="posit_details_money"><strong>面议</strong></span>
                <p class="posit_details_tip">经验不限、学历本科</p>
              </div>
              <div class="job_details">
                <p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
                <h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
                <div class="job_msg">任职资格：1.协助领导处理与各部门沟通和合作事宜；<br>
                  2.收集媒体信息，处理与各类媒体接洽、合作关系，协助媒介公关；<br>
                  3.注意收集影响本公司形象、声誉、关系的因素和事件信息，分析其后果，及时向领导提出对策建议；<br>
                  4.配合做好来宾迎送、接待、陪同、参观、讲解等工作；<br>
                  5.负责对合同的审阅、整理、归档、款项申请及保管工作；<br>
                  6.完成领导交办的其它工作。</div>

              </div>
              <div class="posit_arrow_bot"></div>





            </div>
            <div class="swiper-slide slide2">

              <div class="posit_details_head">
                <h3 class="posit_details_tit">前台接待/总机/接待生</h3>
                <span class="posit_details_money"><strong>面议</strong></span>
                <p class="posit_details_tip">经验不限、学历不限</p>
              </div>
              <div class="job_details">
                <p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
                <h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
                <div class="job_msg">任职资格：1、准确接听/转接电话，接待来访客人并及时准确通知被访人员；<br>
                  2、收发公司邮件、报刊、传真和物品等并做好登记管理以及转递工作；<br>
                  3、熟悉掌握前台各项操作流程，并熟知各会员卡的种类，以及卖品和出租更衣柜的销售价格；<br>
                  4、完成上级主管交办的其它工作，做好其他部门的协助工作；<br>
                  5、具有良好的待人接物及沟通协调能力，具有服务意识，负有责任心，性格活泼开朗，具有亲和力<br>
                </div>

              </div>
              <div class="posit_arrow_bot"></div>
            </div>
            <div class="swiper-slide slide3">

              <div class="posit_details_head">
                <h3 class="posit_details_tit">Web前端开发、互联网软件开发工程师</h3>
                <span class="posit_details_money"><strong>面议</strong></span>
                <p class="posit_details_tip">经验不限、学历大专</p>
              </div>
              <div class="job_details">
                <p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
                <h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
                <div class="job_msg">
                  任职资格：精通javascript、html；精通PS、Dreamweaver;<br>
                  精通WEB标准，熟练运用 DIV+CSS 来制作符合 w3c 规范的页面;<br>
                  具备熟练的编写和修改代码能力;<br>
                  懂得网络营销、精通页面优化技巧;<br>
                  具备良好的团队合作精神、较好的沟通能力、高度的责任感;</div>

              </div>
              <div class="posit_arrow_bot"></div>
            </div>


            <div class="swiper-slide slide4">
              <div class="posit_details_head">
                <h3 class="posit_details_tit">总经理助理/总裁助理/总经理秘书</h3>
                <span class="posit_details_money"><strong>面议</strong></span>
                <p class="posit_details_tip">经验不限、学历大专</p>
              </div>
              <div class="job_details">
                <p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
                <h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
                <div class="job_msg">任职资格：1、负责对项目出现的各类问题进行沟通协调，及时向总裁反馈重要信息；<br>
                  2、根据总裁需要，搜集行业相关信息，统计数据，撰写可行性研究报告等供总经理决策；<br>
                  3、协助总裁与客户建立良好的合作关系，并负责做好公司重要来宾的接待安排；<br>
                  4、撰写总裁需要的有关报告、文件；<br>
                  5、处理涉及总裁的电话、邮件、传真等各种渠道的信息，做到合理过滤和正确传达；<br>
                  6、有总裁亲自出面进行的接待，其餐饮、住宿、旅游等具体细节有总裁助理协助行政部共同安排；<br>
                  7、完成公司领导交办的其他工作任务；</div>

              </div>
              <div class="posit_arrow_bot"></div>
            </div>


            <div class="swiper-slide slide5">
              <div class="posit_details_head">
                <h3 class="posit_details_tit">文案策划</h3>
                <span class="posit_details_money"><strong>面议</strong></span>
                <p class="posit_details_tip">经验不限、学历本科</p>
              </div>
              <div class="job_details">
                <p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
                <h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
                <div class="job_msg">
                  任职资格：1、文笔流畅，触觉敏锐，思路清晰，良好的沟通能力和演讲能力；<br>2、熟练操作PPT，Excel等相关办公软件；了解无线WiFi网络常识，乐于追赶时尚潮流；<br>3、熟悉微营销，擅长媒体的媒介数据分析、媒体策略、投放计划、广告监测执行、广告效果评估等相关工作，具备独立的媒体策划能力和提案能力，有成功策划案例者优先；<br>4、具备良好的职业素养、较强的执行力、责任心、工作主动性、服务意识、沟通能力和团队合作精神。<br>5、本科或以上学历，2年以上广告公司媒介策划相关工作经验。
                </div>

              </div>
              <div class="posit_arrow_bot"></div>
            </div>

          </div>
        </div>


        <div class="job_btn_con ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0.1s"
          swiper-animate-delay="0.5s">
          <div class="job_btn_list">
            <a href="#" class="job_btn add">投个简历</a>
            <a href="tel:0755-12345678" class="job_btn tel">电话联系</a>
          </div>
        </div>

      </section>
      <!-------------slide5----------------->
      <section class="swiper-slide swiper-slide5 swiper-slide-v">
        <div class="logo">
          <div class="box1">
            <div class="box2">
              <img src="upload/wzp_logo.png">
            </div>
          </div>
        </div>
        <p class="praise_tip ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s"
          swiper-animate-delay="0s">已有<b>5</b>人觉得这家公司值得加入</p>
        <a class="praise_btn ani" href="javascript:;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s"
          swiper-animate-delay="0.1s">
          <i><em></em></i><span>点赞，值得加入</span>
        </a>
        <a class="praise_share_btn ani" href="javascript:;" swiper-animate-effect="fadeInUp"
          swiper-animate-duration="0.3s" swiper-animate-delay="0.2s">分享给好友</a>
        <a class="more_position ani" href="#" id="viewmoreinfozp" swiper-animate-effect="fadeInUp"
          swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">查看更多职位&gt;&gt;</a>


      </section>

      <!-------------slide6----------------->
      <section class="swiper-slide swiper-slide6 swiper-slide-v">
        <div class="logo ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
          swiper-animate-delay="0s">
          <div class="box1">
            <div class="box2">
              <img src="upload/wzp_logo.png">
            </div>
          </div>
        </div>

        <div class="search_posit ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
          swiper-animate-delay="0.1s">
          <div class="search_input_con">
            <div class="search_input_details">
              <input type="text" placeholder="搜索我感兴趣的企业" value="" class="search_input">
            </div>
          </div>
          <a class="search_btn" href="javascript:;"></a>
        </div>
        <a class="search_footer_btn ani" href="#" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s"
          swiper-animate-delay="0.3s">创建我的微招聘</a>
        <p class="search_footer_tip ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
          swiper-animate-delay="0.3s">某同城提供以上服务</p>


      </section>

    </div>
    <div class="arrow-box">
      <img src="images/arrow.png" id="array">
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <script src="js/code.min.js"></script>
  <!--切换效果采用Swiper，更多Swiper应用敬请关注Swiper中文网-->
</body>

</html>